<template>
	<div class="second-page">
		<h1>照片墙</h1>
		<div class="image-wall">
			<div v-for="item in 33" :key="item" class="img-box" @click="handleClick">
				<img src="../assets/01.jpg" alt="" />
			</div>
		</div>
		<div v-if="popupVisible" class="popup-wrapper">
			<div :class="{ popup: true, popup__closing: closing }">
				<div class="popup-wrapper-content">
					<div class="content-title">这是标题</div>
					<div class="content-content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
				</div>
				<img class="popup-wrapper-image" src="../assets/01.jpg" alt="" />
			</div>
		</div>
		<div
			:class="{ 'popup-mask': true, 'popup-mask__opening': popupVisible, 'popup-mask__closing': closing }"
			v-if="popupVisible"
			@click="handleClick"
		></div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			popupVisible: false,
			closing: false
		};
	},
	mounted() {
		this.handleInit();
	},
	methods: {
		handleInit() {
			const imgBoxList = document.querySelectorAll('.img-box');
			imgBoxList.forEach((wrapper) => {
				wrapper.addEventListener('mousemove', (e) => {
					const rect = wrapper.getBoundingClientRect();
					let x = e.clientX - rect.left;
					let xFlag = x > rect.width / 2 ? 1 : -1;
					let y = e.clientY - rect.top;
					let yFlag = y > rect.height / 2 ? 1 : -1;
					const img = wrapper.querySelector('img');
					img.style.transform = `translate(${x * 0.25 * xFlag}px, ${y * 0.25 * yFlag}px) scale(2)`;
				});
				wrapper.addEventListener('mouseleave', (e) => {
					const img = wrapper.querySelector('img');
					img.style.transform = `translate(0, 0) scale(1)`;
				});
			});
		},
		handleClick() {
			if (!this.popupVisible) {
				this.popupVisible = true;
			} else {
				if (!this.closing) {
					this.closing = true;
					setTimeout(() => {
						this.popupVisible = false;
						this.closing = false;
					}, 900);
				}
			}
		}
	}
};
</script>

<style lang="scss">
.second-page {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	position: relative;
	overflow: hidden;

	.image-wall {
		$size: 100px;
		margin-top: 100px;

		display: grid;
		grid-template-columns: repeat(12, $size);
		grid-auto-rows: $size;
		place-items: start center;
		gap: 15px;

		.img-box {
			grid-column: auto / span 2;
			width: $size;
			height: $size;
			border: 5px #fff solid;
			border-radius: 10px;
			box-shadow: 5px 5px #00000020;
			transform: rotate(45deg);
			transition: all 0.3s;
			cursor: pointer;
			overflow: hidden;

			&:hover {
				transform: rotate(0) scale(1.6);
				z-index: 10;
			}

			&:nth-child(11n - 4) {
				grid-column: 2 / span 2;
			}

			img {
				object-fit: cover;
				width: $size;
				height: $size;
				transition: all 0.5s;

				&:not(:hover) {
					filter: brightness(0.8) contrast(0.8);
				}
			}
		}
	}

	.popup-mask {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		background-color: #00000080;
		transition: all 0.5s ease-in-out;
		animation: mask__opening 1s ease-in-out;

		@keyframes mask__opening {
			from {
				background-color: #00000000;
			}
			to {
				background-color: #00000080;
			}
		}

		&__closing {
			background-color: #00000000;
		}
	}

	// popup框架
	.popup-wrapper {
		width: 60%;
		height: 70%;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 100;

		.popup {
			display: flex;
			width: 100%;
			height: 100%;
			background-color: #fff;

			box-shadow: 5px 0 10px #00000030;
			animation: init 1s ease-in-out;

			@keyframes init {
				0% {
					transform: translateX(-99.9%);
					height: 0;
				}

				60% {
					height: 100%;
					transform: translateX(-99.9%);
				}

				/* 动画结束时，将容器内部元素整体平移回原始位置，实现从左往右展开的视觉效果 */
				to {
					transform: translateX(0);
				}
			}

			&__closing {
				animation: closing 1s ease-in-out;
				@keyframes closing {
					from {
						transform: translateX(0);
					}
					to {
						transform: translateX(-120%);
					}
				}
			}

			.popup-wrapper-content {
				flex: 1;
				display: flex;
				flex-direction: column;
                padding: 20px;

				.content-title {
					font-family: Avenir, Helvetica, Arial, sans-serif;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					text-align: center;
					color: #2c3e50;
                    font-size: 32px;
                    letter-spacing: 0.1rem;
					font-weight: bold;
					margin: 12px;
                    margin-top: 0px;
				}
			}

			img {
				width: 70%;
				height: 100%;
			}
		}
	}
}
</style>
